import { defineConfig, loadEnv } from 'vite';
import type { UserConfig, ConfigEnv } from 'vite';
import { fileURLToPath } from 'url';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { viteMockServe } from 'vite-plugin-mock';
import { visualizer } from 'rollup-plugin-visualizer';
import basicSsl from '@vitejs/plugin-basic-ssl';

// ElementPlus自动导入
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import ElementPlus from 'unplugin-element-plus/vite';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';

import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
	// 获取当前工作目录
	const root = process.cwd();
	// 获取环境变量
	const env = loadEnv(mode, root);
	return {
		// 项目根目录
		root,
		// 项目部署的基础路径
		base: '/',
		publicDir: fileURLToPath(new URL('./public', import.meta.url)), // 无需处理的静态资源位置
		assetsInclude: fileURLToPath(new URL('./src/assets', import.meta.url)), // 需要处理的静态资源位置
		plugins: [
			nodePolyfills({
				protocolImports: true
			}),
			// Vue模板文件编译插件
			vue(),
			// jsx文件编译插件
			vueJsx(),
			// mock插件
			viteMockServe({
				mockPath: 'mock'
			}),
			// 开启ElementPlus自动引入CSS
			ElementPlus({}),
			AutoImport({
				// 定义需要自动引入的框架
				imports: ['vue', 'vue-router', 'pinia'],
				dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),
				// 处理eslint
				eslintrc: {
					enabled: true
					// // 生成文件地址和名称
					// filepath: fileURLToPath(new URL('./.eslintrc-auto-import.json', import.meta.url)),
					// globalsPropValue: true
				},
				resolvers: [ElementPlusResolver(), IconsResolver()]
			}),
			Components({
				resolvers: [ElementPlusResolver(), IconsResolver()],
				dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),
				dirs: [fileURLToPath(new URL('./src/components/auto', import.meta.url))]
			}),
			Icons({
				autoInstall: true
			}),
			// basicSsl(), // 仅用于webauthn本地debug

			createSvgIconsPlugin({
				// 指定需要缓存的图标文件夹
				iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
				// 指定symbolId格式
				symbolId: 'icon-[dir]-[name]',

				/**
				 * 自定义插入位置
				 * @default: body-last
				 */
				inject: 'body-last',

				/**
				 * custom dom id
				 * @default: __svg__icons__dom__
				 */
				customDomId: '__svg__icons__dom__'
			})
		],
		css: {
			preprocessorOptions: {
				scss: {
					api: 'modern-compiler', // or "modern", "legacy"
					// 引入全局的 Sass 文件
					additionalData: `@use "@/styles/custom.scss" as *;`
				}
			}
		},
		// 运行后本地预览的服务器
		server: {
			// 是否开启https
			// https: false,
			// 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
			host: true,
			// 开发环境预览服务器端口
			port: 8080,
			// 启动后是否自动打开浏览器
			open: false,
			// 是否开启CORS跨域
			cors: true,
			// 代理服务器
			// 帮助我们开发时解决跨域问题
			proxy: {
				// 这里的意思是 以/api开头发送的请求都会被转发到 http://xxx:3000
				'/api': {
					target: 'http://localhost:3001',
					// 改变 Host Header
					changeOrigin: true,
					// 发起请求时将 '/api' 替换为 ''
					rewrite: (path) => path.replace(/^\/api/, '')
				}
			}
		},
		// 打包配置
		build: {
			// 关闭 sorcemap 报错不会映射到源码
			sourcemap: false,
			// 打包大小超出 400kb 提示警告
			chunkSizeWarningLimit: 400,
			rollupOptions: {
				// 打包入口文件 根目录下的 index.html
				// 也就是项目从哪个文件开始打包
				input: {
					index: fileURLToPath(new URL('./index.html', import.meta.url))
				},
				plugins: [visualizer({ open: false })],
				// 静态资源分类打包
				output: {
					experimentalMinChunkSize: 20 * 1024,
					format: 'esm',
					chunkFileNames: 'static/js/[name]-[hash].js',
					entryFileNames: 'static/js/[name]-[hash].js',
					assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
				}
			}
		},
		// 配置别名
		resolve: {
			alias: {
				'@': fileURLToPath(new URL('./src', import.meta.url)),
				'#': fileURLToPath(new URL('./types', import.meta.url)),
			}
		}
	};
});
